<tagLib name="cx,html" />
<style type="text/css" media="all">
#offWidget, #onWidget { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; width: 32%; }
#offWidget li, #onWidget li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 220px; }
.itemContent { margin-left: 15px; font-size: 0.8em; }
.ui-state-default {
	background:#F6F6F6 repeat-x scroll 50% 50%;
	border:1px solid #CCCCCC;
	color:#1C94C4;
	font-weight:bold;
	outline-color:-moz-use-text-color;
	outline-style:none;
	outline-width:medium;
}
</style>
<script type="text/javascript" src="../Public/Js/jquery-ui-sortable.js"></script>
<script type="text/javascript">
$(function() {
	$('a.closeEl').bind('click', toggleContent);
	$("#offWidget, #onWidget").sortable({
		connectWith: ['.connectedSortable']
	});
});

var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}
	return false;
};

function serialize()
{
	var offWidget='';
	$("#offWidget li").each(function(){
		offWidget += 'offWidget[]='+this.id+'&';
	});
	$("#off").attr("value",offWidget);

	var onWidget='';
	$("#onWidget li").each(function(){
		onWidget += 'onWidget[]='+this.id+'&';
	});
	$("#on").attr("value",onWidget);
	
	$("#widgetForm").submit();
}
</script>
<div id="box">
<h3>widget管理</h3>
<form id="widgetForm" method="POST" action="{:url('widgetConfig')}">
	<input name="offWidget" id="off" type="hidden"><input name="onWidget" id="on" type="hidden">
	<input type="button" class="btn" value="保存" onclick="serialize()">
</form>
<div style="width: 32%; margin-left: 1%; margin-right: 1%; float: left; text-align:center;"><h4>未启用的Widget</h4></div>
<div style="width: 32%; margin-left: 1%; margin-right: 1%; float: left; text-align:center;"><h4>已启用的Widget</h4></div>
<br clear="all">
<ul id="offWidget" class="connectedSortable">
<volist name="offWidget" id="off">
	<li id="{$off.id}" class="ui-state-default">
		<div class="itemHeader">{$off.name|Input::forShow}<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
		{$off.description|Input::forShow}
		</div>
	</li>
</volist>
</ul>
<ul id="onWidget" class="connectedSortable">
<volist name="onWidget" id="on">
	<li id="{$on.id}" class="ui-state-default">
		<div class="itemHeader">{$on.name|Input::forShow}<a href="#" class="closeEl">[-]</a></div>
		<div class="itemContent">
		{$on.description|Input::forShow}
		</div>
	</li>
</volist>
</ul>
<div class="clearfix"></div>
</div>